<template>
  <pageTabelLayout v-loading="pageData.loadingUp">
    <template #pageHeader>
      <div class="my-tool-bar" style="margin-bottom: 5px">
        <a-space>
          <el-button type="primary" :icon="Search" @click="getList">查询</el-button>
          <el-button type="success" :icon="CirclePlus" @click="newData('新增')">新增</el-button>
          <el-button plain :icon="Delete" @click="deleteData">删除</el-button>
        </a-space>
      </div>
    </template>

    <!-- <div style="background-color: #f0f2f5; height: 10px"></div> -->
    <template #pageTabel>
      <encapsulation-agrid ref="refgridOption" :configaggrid="configaggrid"></encapsulation-agrid>
    </template>
    <a-drawer
      cancel-text="关闭"
      ok-text="保存"
      height="90%"
      placement="bottom"
      :visible="pageData.showAdd"
      unmountOnClose
      @cancel="pageData.showAdd = false"
      @ok="save"
      :mask-closable="false"
    >
      <template #title> {{ pageData.type }}</template>
      <!-- <a-form size="small" :model="query" layout="inline">
        <a-form-item label="出库单号">
          <a-input
            allow-clear
            :style="{ width: '200px' }"
            class="bacClass"
            v-model="query.stockOutCode"
          />
        </a-form-item>
        <a-form-item label="资产类型">
          <a-input
            allow-clear
            :style="{ width: '200px' }"
            class="bacClass"
            v-model="query.customName"
          />
        </a-form-item>
        <a-form-item label="备注">
          <a-input
            allow-clear
            :style="{ width: '200px' }"
            class="bacClass"
            v-model="query.customOrderNo"
          />
        </a-form-item>
        <a-form-item label="创建人">
          <a-input
            allow-clear
            :style="{ width: '200px' }"
            class="bacClass"
            v-model="query.customOrderNo"
          />
        </a-form-item>
        <a-form-item label="创建时间" prop="startDate">
          <a-date-picker  popup-container="html" 
            v-model="query.startDate"
            :style="{ width: '200px' }"
            class="bacClass"
          />
        </a-form-item>
        <a-form-item label="最后修改人">
          <a-input
            allow-clear
            :style="{ width: '185px' }"
            class="bacClass"
            v-model="query.customOrderNo"
          />
        </a-form-item>
      </a-form> -->
      <el-form ref="ruleFormRef" :model="query" label-width="85px" class="demo-query" status-icon>
        <el-row :gutter="24">
          <!-- <el-col :span="6">
            <el-form-item
              label="资产类型"
              prop="propertyType"
              :rules="[{ required: true, message: '资产类型必选' }]"
            >
              <el-input v-model="query.propertyType" style="width: 200px" />
            </el-form-item>
          </el-col> -->
          <el-col :span="6">
            <el-form-item
              label="分摊类型"
              prop="shareType"
              :rules="[{ required: true, message: '分摊类型必选' }]"
            >
              <el-input v-model="query.shareType" style="width: 200px" />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="6">
            <el-form-item
              label="分摊年限"
              prop="shareYears"
              :rules="[{ required: true, message: '分摊年限必选' }]"
            >
              <el-input v-model="query.shareYears" style="width: 200px" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="资产类别"
              prop="propertyClasses"
              :rules="[{ required: true, message: '资产类别必选' }]"
            >
              <el-input v-model="query.propertyClasses" style="width: 200px" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24"> -->
          <el-col :span="6">
            <el-form-item label="备注" prop="remark">
              <!-- <el-date-picker
                type="date"
                placeholder="选择开始日期"
                v-model="query.stockOutDate"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                style="width: 200px"
              /> -->
              <el-input v-model="query.remark" style="width: 200px" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </a-drawer>
  </pageTabelLayout>
</template>

<script lang="ts" setup>
  // 引入element提示
  import { ElMessage, ElMessageBox } from 'element-plus'
  //引入封装post
  import { post } from '@/api/http'
  import { tableColumns } from './DeviceTypeAllocationSettings'
  import buttionRender from '@/components/aggridCellRenDerer/buttionRender.vue'
  import { Search, Delete, CirclePlus } from '@element-plus/icons-vue'
  let pageData = reactive<any>({
    showAdd: false,
    type: '',
    loadingUp: false,
    id: '',
  })
  let query = reactive<any>({
    propertyType: '',
    shareType: '',
    shareYears: '',
    remark: '',
    propertyClasses: '',
  })
  tableColumns.push({
    headerName: '操作',
    field: 'ouihadpc',
    resizable: 'false',
    filter: 'false',
    sortable: 'false',
    width: 90,
    // lockPosition: 'right',
    pinned: 'right',
    cellRenderer: buttionRender,
    cellRendererParams: {
      buttonList: [
        {
          type: 'success',
          text: '修改',
          typeName: 'el-button',
          Callback: (data: any) => {
            newData('修改')
            console.log(data)
            const { propertyType, shareType, shareYears, remark, id, propertyClasses } = data
            query.propertyType = propertyType
            query.shareType = shareType
            query.shareYears = shareYears
            query.remark = remark
            query.propertyClasses = propertyClasses
            pageData.id = id
          },
        },
      ],
      eltagSize: 0,
    },
  })
  let refgridOption = ref<any>()
  let configaggrid = ref({
    url: 'purchase/FixedAssetsShare/getPage', //接口路径
    queryData: {},
    paginationShow: true, //分页是否显示
    invokeiIterface: true, //是否调用接口
    rowMultiSelectWithClick: true, //点击行是否多选
    column: tableColumns,
  })
  const newData = (type: string) => {
    pageData.type = type
    pageData.showAdd = true
    if (type == '新增') {
      query.propertyType = ''
      query.shareType = ''
      query.shareYears = ''
      query.remark = ''
      query.propertyClasses = ''
      pageData.id = ''
    }
  }
  const deleteData = () => {
    const selectedData = refgridOption.value.getSelectedRows()
    if (selectedData.length == 0) {
      ElMessage.warning('请勾选您要删除的单据')
      return
    }
    // let condition = selectedData.every((item: any) => item.auditState == 1)
    // if (condition) {
    //   ElMessage.warning('状态为审核通过不可删除!')
    //   return
    // }
    ElMessageBox.confirm('确认删除选中单据?', '提示', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    })
      .then(async () => {
        try {
          pageData.loadingUp = true
          let arr: any
          arr = []
          selectedData.map((item: any) => {
            arr.push(item.id)
          })
          let { code, message } = await post({
            url: 'purchase/FixedAssetsShare/delete',
            data: arr,
          })
          if (code == 200) {
            ElMessage.success('删除成功')
            pageData.loadingUp = false
            refgridOption.value.setQuery()
            return
          }
          ElMessage.error(message)
        } finally {
          pageData.loadingUp = false
        }
      })
      .catch(() => {})
  }
  const ruleFormRef = ref<any>()

  const save = async () => {
    try {
      await ruleFormRef.value.validate()
      if (pageData.type == '新增') {
        try {
          pageData.loadingUp = true
          query.id = undefined
          let { code, message } = await post({
            url: 'purchase/FixedAssetsShare/insert',
            data: [query],
          })
          if (code == 200) {
            ElMessage.success('新增成功')
            pageData.loadingUp = false
            refgridOption.value.setQuery()
            pageData.showAdd = false
            return
          }
          ElMessage.error(message)
        } finally {
          pageData.loadingUp = false
        }
      }
      if (pageData.type == '修改') {
        let pam = query
        pam.id = pageData.id
        try {
          pageData.loadingUp = true
          let { code, message } = await post({
            url: 'purchase/FixedAssetsShare/update',
            data: [pam],
          })
          if (code == 200) {
            ElMessage.success('修改成功')
            pageData.loadingUp = false
            refgridOption.value.setQuery()
            pageData.showAdd = false
            return
          }
          ElMessage.error(message)
        } finally {
          pageData.loadingUp = false
        }
      }
    } catch {}
  }
  onMounted(() => {
    getList()
  })
  const getList = () => {
    refgridOption.value.setQuery()
  }
</script>
<script lang="ts">
  export default defineComponent({
    name: 'DeviceTypeAllocationSettings',
  })
</script>
<style scoped>
  .contioner {
    height: 100%;
  }

  .contentPrint {
    width: 100%;
    display: flex;
    justify-content: space-between;

    color: #000 !important;
  }

  .printLeft {
    width: 56%;
  }

  .printTitle {
    font-size: 22px;
    font-weight: 700;
    margin-top: 20px;
  }

  .printRight {
    width: 43%;
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
  }

  .ermPrint {
    display: flex;
    justify-content: center;
    /* flex-flow: column wrap; */
    align-items: center;
  }

  .erm {
    width: 160px;
    height: 50px;
    background: #999;
  }

  .formPrint {
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
  }

  .ban {
    width: 50%;
    margin-bottom: 5px;
  }

  .quan {
    width: 100%;
    margin-bottom: 5px;
  }

  table {
    text-align: center;
    color: #000;
  }

  td {
    color: #000;
  }

  th {
    color: #000;
  }

  .tablePrint {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    flex-flow: row wrap;
  }

  .footerPrint {
    display: flex;
    justify-content: space-around;
    margin-top: 8px;
    color: #000;
  }

  .createTime {
    width: 100px;
  }

  .printw {
    width: 30%;
    margin-bottom: 5px;
  }

  :deep(.el-dialog__body) {
    color: #000;
  }

  .my-tool-bar {
    background: #fff;
    padding: 18px;
  }

  :deep(.el-input__inner) {
    color: #3b3a3a;
  }

  :deep(.el-input__wrapper) {
    box-shadow: 0 0 0 1px #474849 inset;
  }

  :deep(.el-form-item__label) {
    color: #202021;
  }

  :deep(.arco-drawer-container) {
    z-index: 1000 !important;
  }
</style>
